<template>
	<div class="userInfo">
		<h4>账号基本信息</h4>
		<div class="resdata">
			<el-form ref="RESDATA" :model="RESDATA" size="small" label-width="110px">
				<el-form-item label="注册邮箱">
					{{ RESDATA.email }}
				</el-form-item>
				<el-form-item label="昵称">
					<el-input v-model="RESDATA.username" @blur="setUserName"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					{{ RESDATA.mobile }}
				</el-form-item>
				<el-form-item label="注册时间">
					{{ RESDATA.add_time }}
				</el-form-item>
				<el-form-item label="账号类型">
					{{ RESDATA.status }}
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { update,getinfo } from '@/api';
import {setStore, getStore} from '@/config/mUtils'
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
			RESDATA: {},
			user_id: null,
			username: null,
		};
	},
	mounted(){
        this.user_id = this.croUser.user_id || null;
		this.getRESDATA();
	},
	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
		setUserName(){
			if(this.username == this.RESDATA.username){ 
				return
			}
			let para={
				user_id: this.user_id,
				username: this.RESDATA.username,
			}
			update(para).then(res=>{
				if(res.data){
					this.username = this.RESDATA.username;
					this.$store.state.croUser.username = this.RESDATA.username;
					let croUser = JSON.parse(getStore('croUser'));
					croUser.username = this.RESDATA.username;
					setStore('croUser',croUser);
					this.$message.success(res.msg);
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.$message.error(res.msg);
                }
			})
		},
		getRESDATA(){
			if(!this.croUser){
				this.OUT_LOGIN();
				this.$router.push('/login');
				return
			}
            let para = {
                id: this.user_id,
                user_id: this.user_id,
            };
			getinfo(para).then(res=>{
                if(res.data){
                    this.RESDATA = res.data;
					this.username = res.data.username;
                }else if(res.tologin) {
                    this.OUT_LOGIN();
                    this.$router.push('/login');
                }else {
                    this.$message.error(res.msg);
                }
			});
		}
	}
};
</script>
<style scoped lang="scss">
.userInfo {
	h4 {
		font-size: 14px;
		font-weight: 700;
		line-height: 40px;
	}
	.resdata {
		width: 500px;
		margin: 30px auto;
	}
}
</style>
